<template>
  <div class="warpper-box">
    <div class="inner_box">
      <el-form :inline="true" size="small" :model="formInline" ref="formInline">
        <el-form-item label="考核周期" prop="time">
          <el-date-picker
            v-model="formInline.time"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="评价结论" prop="evaluationConclusion">
          <el-input
            v-model="formInline.evaluationConclusion"
            placeholder="模糊搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="考核类型" prop="supplierCategory">
          <el-select v-model="formInline.supplierCategory" placeholder="请选择">
            <el-option label="全部" value=""> </el-option>
            <el-option label="工程和货物类" value="1"> </el-option>
            <el-option label="服务类" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="loadList(true)"
            >搜索</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-setting"
            @click="reset('formInline')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
        ref="tableRef"
        style="width: 100%"
        :header-cell-style="headerCellStyle"
        :cell-style="cellStyle"
        border
        stripe
      >
        <el-table-column label="序号" width="50" align="center" :index="1">
          <template #default="scope">
            {{ (models.pageNum - 1) * models.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="考核周期" width="120">
          <template #default="scope">
            {{ scope.row.evaluationStartDate | intervalTime }} 至
            {{ scope.row.evaluationEndDate | intervalTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="供应商类别"
          resizable
          show-overflow-tooltip
          width="120"
          prop="categoryName"
        />
        <el-table-column
          label="公司名称"
          resizable
          show-overflow-tooltip
          width="120"
          prop="supplierName"
        >
          <template #default="scope">
            <label class="link-box" @click="supplierDetail(scope.row)">{{
              scope.row.supplierName
            }}</label>
          </template>
        </el-table-column>
        <el-table-column
          label="履约过程、廉洁、综合评价扣分情况"
          :class-name="ageColumnClass"
        >
          <template #default="scope">
            <ul class="uls">
              <li
                v-for="(items, colIndex) in scope.row.projectCountInfo"
                :key="colIndex"
                class="lis"
              >
                <label>{{ items.name }}</label>
                <span>{{ items.score }}</span>
              </li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column
          label="投标过程扣分情况"
          width="80"
          prop="bidProcessDeduction"
        />
        <el-table-column label="最终扣分" width="80" prop="totalDeduction" />
        <el-table-column
          label="投标过程考核评价结论分情况"
          resizable
          show-overflow-tooltip
          width="140"
          prop="evaluationConclusion"
        />
        <el-table-column
          label="备注"
          resizable
          show-overflow-tooltip
          width="140"
          prop="remark"
        />
      </el-table>
      <el-row>
        <el-pagination
          class="page-footer"
          background
          layout="total,prev,pager,next,sizes,jumper"
          :total="total"
          :page-sizes="[10, 20, 30, 40, 50]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </el-row>
    </div>
    <supplierDetail ref="createSupplierDetail" />
  </div>
</template>

<script>
import moment from "moment";
import { mapGetters, mapActions } from "vuex";
import {
  getEvaluationPage,
  getEvaluationExport,
  getSupplierCategoryTree,
  getEvaluationSave
} from "@/api/supplier_api";
import { checkEmail, checkPhone, TreeArrar } from "@/utils/index";
import supplierDetail from "@/views/supplier/evaluate/supplier_detail.vue";
export default {
  components: {
    supplierDetail
  },
  data() {
    return {
      formInline: {
        name: "",
        categoryName: [],
        cateoryId: "",
        evaluationConclusion: "",
        supplierCategory: "",
        time: []
      },
      treeData: [],
      total: 1,
      tableData: [],
      models: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  filters: {
    intervalTime(val) {
      if (!val) {
        return;
      }
      return moment(val).format("YYYY-MM-DD");
    }
  },
  computed: {
    ...mapGetters(["findType", "permission_user"]),
    ageColumnClass() {
      return "custom-age-column";
    }
  },
  mounted() {
    this.loadList(true);
  },
  methods: {
    async loadList(formData) {
      let param = {};
      if (typeof formData === "boolean") {
        this.models.pageNum = 1;
        this.models.pageSize = 10;
        if (this.$refs.createSupplier) {
          this.$refs.createSupplier.clearSelected();
        }
      }
      if (typeof formData === "object") {
        this.models.pageNum = formData.pageNum;
        this.models.pageSize = formData.pageSize;
      }
      if (this.formInline.categoryName && this.formInline.categoryName.length) {
        param.categoryName = this.formInline.categoryName;
      }

      if (this.formInline.time && this.formInline.time.length) {
        param.evaluationTimeStart = this.formInline.time[0];
        param.evaluationTimeEnd = this.formInline.time[1];
      }
      let supplier = this.permission_user.purchaseSupplier;
      if (supplier !== null && typeof supplier === "object") {
        param.supplierId = supplier.id;
      }
      param.evaluationConclusion = this.formInline.evaluationConclusion;
      param.name = this.formInline.name;
      param.pageNum = this.models.pageNum;
      param.pageSize = this.models.pageSize;
      const { code, data } = await getEvaluationPage(param);
      if (code == 200) {
        const regex = /#~#/;
        data.list.forEach(v => {
          if (regex.test(v.projectCountInfo)) {
            const parts = v.projectCountInfo.split("#~#");
            v.projectCountInfo = JSON.parse(parts[0]);
          } else {
            v.projectCountInfo = JSON.parse(v.projectCountInfo)
          }

          // if (v.projectCountInfo) {
          //   const filteredStr = v.projectCountInfo.replace(/\r\n/g, '');
          //   v.projectCountInfo = JSON.parse(filteredStr)
          // }
        })
        this.tableData = data.list;
        this.total = data.total;
      }
    },
    handlePageChange(page) {
      this.models.pageNum = page;
      this.loadList(true);
    },
    handleSizeChange(page) {
      this.models.pageSize = page;
      this.loadList(true);
    },
    headerCellStyle({ column }) {
      return {
        padding: "6px 0"
      };
    },
    cellStyle({ column }) {
      // 改变指定列（如第二列）的表格内容样式
      if (column.label === "履约过程、廉洁、综合评价扣分情况") {
        return {
          padding: "0"
        };
      }
      return {};
    },
    reset(formName) {
      this.$refs[formName].resetFields();
      this.formInline.cateoryId = "";
      this.loadList(true);
    },
    supplierDetail(row) {
      this.$refs.createSupplierDetail.openDetail(row);
    }
  }
};
</script>
<style scoped>
.uls {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.uls li {
  flex: 1;
  text-align: center;
  border-right: 1px solid #ebeef5;
  display: grid;
  grid-template-rows: 1fr 0.5fr;
  align-items: center;
}
.uls li:last-child {
  border-right: 0;
}
.uls li label {
  border-bottom: 1px solid #ebeef5;
  padding: 6px 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  width: 100%;
}
.uls li span {
  padding: 6px 0;
  width: 100%;
}
</style>
